<template id="repForm">
  <div>
    <div class="form">
      <div class="form-groupr">
        <input
          name=""
          id="input"
          class="form-grf"
          v-model="content"
          placeholder="爱评论的人一定很有趣"
        />
        <button type="submit" class="btn" @click.prevent="saveComment">
          发布
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Discuss",
  data: function () {
    return {
      userName: "",
      content: "",
    };
  },
  methods: {
    saveComment: function saveComment() {
      var comment = {
        id: new Date(),
        userName: localStorage.getItem("username"),
        content: this.content,
      };
      //取得之前存储的元数据
      var list = JSON.parse(localStorage.getItem("commentList") || "[]");

      list.unshift(comment);
      //重设localStorage
      localStorage.setItem("commentList", JSON.stringify(list));

      this.userName = this.content = "";

      //调用父组件方法刷新列表
      this.$emit("func");
    },
  },
  created() {
    this.username = localStorage.getItem("username");
  },
};
</script>
<style>
.form {
  height: 30px;
}
.form-groupf {
  width: 100%;
  font-size: 20px;
  width: 20%;
}
.form-groupr {
  margin-right: 10px;
  width: 100%;
}
.form-grf {
  width: 80%;
  height: 36px;
  border-radius: 15px;
  margin: 5px;
  padding: 0 0px 0 10px;
  line-height: 36px;
  background-color: #eee;
}
.btn {
  line-height: 36px;
  height: 36px;
  font-size: 17px;
  float: right;
  color: #6f6d6d;
  background-color: #fff;
  outline: none;
  border: none;
  margin: 2px;
}
.list-group-item {
  margin-top: 20px;
}
</style>
